<template>
	<view class="flex-direction flex flex-center">
		<image src="../../static/icos/default-face.png" mode="" class="top-img"></image>
		<form>
			<view class="cu-form-group">
				<view class="title">手机号码
				</view>
				<input placeholder="请输入你的手机号" v-model="phone"></input>
				<view class="cu-capsule radius">
					<view class="cu-tag bg-blue"> +86 </view>
					<view class="cu-tag line-blue"> 中国大陆 </view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input placeholder="请输入你的密码" v-model="password"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">验证码
				</view>
				<input placeholder="请输入你的手机验证码" v-model="code"></input>
				<button class="cu-btn bg-green shadow" role="button" aria-disabled="false" @click="getCode()">验证码</button>
			</view> -->
			<button class="cu-btn bg-grey lg button" role="button" aria-disabled="false" @click="toRegister()">注册</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				password: ""
			};
		},
		methods: {
			/**
			 **1.先查询账号是否存在
			 **2.再去注册账号
			 **/
			toRegister() {

				//插入数据
				const data = {
					phone: this.phone,
					password: this.password
				}
				const db = wx.cloud.database({
					env: 'test-demo-tihv0'
				})
				db.collection('test').where({
						phone: this.phone,
					}).get()
					.then(res => {
						console.log(res)
						if (res.data && res.data.length > 0) {
							uni.showToast({
								title: '该账户已被注册',
								duration: 1000
							});
						} else {
							db.collection('test').add({
									// data 字段表示需新增的 JSON 数据
									data: data
								})
								.then(res => {
									uni.showToast({
										title: '注册成功',
										duration: 1000
									});
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/my/my'
										});
									}, 1500)
								})
								.catch(err => {
									console.log(err)
								})
						}
					})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top-img {
		width: 128upx;
		height: 128upx;
		margin: 20upx 0;
	}

	.button {
		width: 80%;
		margin: 20upx 10% 0;
	}
</style>
